<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar fixed v-show="!showCrop">
      <template #left>
        <van-icon @click="onBack" name="arrow-left" size="20px" color="gray" style="font-weight: bold;width: 20px"/>
      </template>
      <template #title>
        <span style="color: #FF8800;font-size: 18px">头像编辑</span>
      </template>
      <template #right>
        <van-button size="small" :disabled="!needSave" @click="onSave" color="#FF8800">保存</van-button>
      </template>
    </van-nav-bar>
    <div style="margin-top: 100px">
      <div>
        <van-image round width="100" height="100" :src="imgPrevie" ></van-image>
      </div>
      <van-uploader style="margin-top: 20px" :after-read="afterRead">
        <van-button color="#FF8800" size="small">选择图片</van-button>
      </van-uploader>
    </div>
    <div v-show="showCrop" >
      <!-- 导航 -->
      <van-nav-bar fixed>
        <template #left>
          <van-button size="small" @click="onCancelCrop" color="#FF8800">取消</van-button>
        </template>
        <template #title>
          <span style="color: #FF8800;font-size: 18px">裁剪</span>
        </template>
        <template #right>
          <van-button size="small" @click="onFinishCrop('base64')" color="#FF8800">确定</van-button>
        </template>
      </van-nav-bar>
      <!-- 裁剪 -->
      <div class="crop-wrapper">
        <VueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="false"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :fixedBox="option.fixedBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          @realTime="realTime"
        ></VueCropper>
        <van-button @click="cropperRotateLeft()" color="#FF8800">旋转</van-button>
      </div>
    </div>

    <!-- 生成预览图片 -->
<!--    <van-image round width="100" height="100" :src="previews.url" style="margin-top: 60px"></van-image>-->
<!--    <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden'}">-->
<!--      <div :style="previews.div">-->
<!--        <img :src="previews.url" :style="previews.img">-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
export default {
  name: 'UserAvatar',
  components: {
    VueCropper
  },
  data () {
    return {
      needSave: false,
      showCrop: false,
      imgPrevie: '',
      imgSelect: [],
      previews: {},
      option: {
        img: '', // 裁切图片的地址
        outputSize: 0.6, // 裁剪生成图片的质量 0.1-1
        info: false,
        full: true, // 是否输出原图比例的截图
        outputType: 'png', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        fixedBox: true, // 固定截图框大小 不允许改变
        original: false, // 上传图片按照原始比例渲染
        canMoveBox: false, // 截图框能否拖动
        canMove: true, // 上传图片是否可以移动
        autoCropWidth: 300,
        autoCropHeight: 300,
        autoCrop: true, // 是否默认生成截图框
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [1, 1]
      }
    }
  },
  methods: {
    // 读取
    afterRead (file) {
      console.log('file', file)
      this.option.img = file.content
      this.showCrop = true
    },
    // 返回
    onBack () {
      this.$router.back()
    },
    // 保存
    onSave () {
      // 获取上传凭证
      this.$api.getUploadTokenReq({ type: 3, fileList: ['avatar.png'] }).then(
        resp => {
          // 上传图片
          if (resp.errMsg === 'OK') {
            const file = this.$util.dataURLToBlob(this.imgPrevie)
            const key = resp.tokenList[0].newName // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
            const token = resp.tokenList[0].token
            let config = {
              useCdnDomain: true, // 表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
              region: null// this.$qiniu.region.z0 // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
            }
            let putExtra = {
              // fname: this.sectionList[secIdx].fileList[fIdx].file.name, // 文件原文件名
              fname: null, // this.uploadTokenList[idx].newName, // 文件名
              params: { a: 111, b: 222 }, // 用来放置自定义变量
              mimeType: null // 用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
            }
            let observable = this.$qiniu.upload(file, key, token, putExtra, config)
            observable.subscribe({
              next: (res) => {
                // 主要用来展示进度
                let total = res.total
                console.log('进度：' + parseInt(total.percent) + '%')
              },
              error: (err) => {
                // 失败报错信息
                console.log('上传失败', err)
              },
              complete: (res) => {
                // 接收成功后返回的信息
                let newAvatar = 'http://laoapp.antegg.net/' + res.key
                this.$api.editBaseInfoReq({ avatar: newAvatar }).then(
                  res => {
                    if (res.errMsg === 'OK') {
                      // 修改内存
                      this.$store.commit('SetUserAvatar', newAvatar)
                      this.$toast('保存成功')
                      setTimeout(
                        () => {
                          this.$toast.clear()
                          this.onBack()
                        }, 1500)
                    }
                  }
                )
              }
            })
          }
        }
      )
    },
    onFinishCrop (type) {
      var that = this
      // 输出
      // var test = window.open('about:blank')
      // test.document.body.innerHTML = '图片生成中..'
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          console.log('blob', data)
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          // 裁切生成的base64图片
          console.log(data)
          that.imgPrevie = data
          that.showCrop = false
          that.needSave = true
        })
      }
    },
    onCancelCrop () {
      this.showCrop = false
    },
    realTime (data) {
      this.previews = data
    },
    // 左旋转
    cropperRotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    // 右旋转
    cropperRotateRight () {
      this.$refs.cropper.rotateRight()
    }
  },
  mounted () {
    console.log('this.$store.user.avatar', this.$store.state.user.avatar)
    this.imgPrevie = this.$store.state.user.avatar
  }
}
</script>

<style scoped>
  .crop-wrapper{
    position: fixed;
    width: 100%;
    top: 40px;
    height: calc(100% - 100px);
  }
  .vue-cropper{
    background: black;
    background-image: none!important;
  }
</style>
